<template>
<div>
    <div class="mycarousel">
        <el-carousel :interval="2000" :autoplay="true" ref="item"
        indicator-position="none" @change="Carouselevents">
            <el-carousel-item v-for="( item ,index ) in fourpicutre" 
            :key="index" :name="item">
                <img :src="item" class="picturelist">
            </el-carousel-item>
        </el-carousel>
    </div>
    <div class="myrow">
        <el-row :gutter="15" type="flex" justify="center">
        <el-col :span="6" :style="firststyle" class="mywalkingcol"><div class="PictureWalkingbutton"
        @mouseover="firstmouseover">国际美妆 爆款低至三折</div></el-col>
        <el-col :span="6" :style="secondstyle" class="mywalkingcol"><div class="PictureWalkingbutton"
        @mouseover="secondmouseover">伊芙丽集团 全场低至1折</div></el-col>
        <el-col :span="6" :style="thirdstyle" class="mywalkingcol"><div class="PictureWalkingbutton"
        @mouseover="thirdmouseover">情人节礼遇季 低至1折</div></el-col>
        <el-col :span="6" :style="fourthstyle" class="mywalkingcol"><div class="PictureWalkingbutton"
        @mouseover="fourthmouseover">开学新装备 运动鞋低至59元</div></el-col>
        </el-row>
    </div>
</div>
</template>

<script>
import picturea from '../../assets/XiaoPictureWalking/XiaoPictureWalkinga.jpg'
import pictureb from '../../assets/XiaoPictureWalking/XiaoPictureWalkingb.jpg'
import picturec from '../../assets/XiaoPictureWalking/XiaoPictureWalkingc.jpg'
import pictured from '../../assets/XiaoPictureWalking/XiaoPictureWalkingd.jpg'

    export default {
        name:'XiaoPictureWalking',
        data(){
            return{
                firststyle:'',
                secondstyle:'',
                thirdstyle:'',
                fourthstyle:'',
                becheckedstyle:{
                    backgroundColor:'rgb(238, 238, 238)',
                },
                fourpicutre:[
                    picturea,
                    pictureb,
                    picturec,
                    pictured
                ]
            }
        },
        methods:{
            firstmouseover(){
                this.$refs.item.setActiveItem(0)
                this.firststyle=this.becheckedstyle
            },
            secondmouseover(){
                this.$refs.item.setActiveItem(1)
                this.secondstyle=this.becheckedstyle
            },
            thirdmouseover(){
                this.$refs.item.setActiveItem(2)
                this.thirdstyle=this.becheckedstyle
            },
            fourthmouseover(){
                this.$refs.item.setActiveItem(3)
                this.fourthstyle=this.becheckedstyle
            },
            Carouselevents(nowitem,olditem){
                console.log('幻灯片变了');
                switch (nowitem) {
                    case 0:
                        this.firststyle=this.becheckedstyle    
                        this.secondstyle=this.thirdstyle=this.fourthstyle=''  
                        break;
                    case 1:
                        this.secondstyle=this.becheckedstyle    
                        this.firststyle=this.thirdstyle=this.fourthstyle=''  
                        break;
                    case 2:
                        this.thirdstyle=this.becheckedstyle    
                        this.firststyle=this.secondstyle=this.fourthstyle=''  
                        break;
                    case 3:
                        this.fourthstyle=this.becheckedstyle    
                        this.firststyle=this.secondstyle=this.thirdstyle=''  
                        break;
                    default:
                        break;
                }
            }
        },
        mounted(){
            console.log('??????',this.fourpicutre);
        },
        watch:{
        }
    }
</script>

<style scoped>
.mycarousel{
    margin-left: 120px;
    margin-right: 120px;
    margin-top: 3px;
    text-align: center;
}
.myrow{
    width: 79%;
    margin: 0 auto;
}
.el-row{
    margin-top: 2px;
    height: 38px;
}
.el-carousel{
    border-radius: 25px;
}
  .mywalkingcol{
    text-align: center;
    margin-top: 3px;
    border-radius: 5px;
    height: 30px;
    width: 50%;
    cursor: pointer;
    background-color: rgb(255, 245, 246);
    background-color: rgb(168, 211, 202);
  }
  .PictureWalkingbutton{
      margin-top: 5px;
      margin-bottom: 0px;
      width: 100%;
      font-size: 12px;
      overflow: hidden;
  }
  .picturelist{
      border-radius: 25px;
      cursor: pointer;
      height: 100%;
      width: 80%;
  }
  .underbutton{
      position: relative    ;
      background-color: blueviolet;
      width: 80%;
      margin:0  auto;
  }
    .underbutton1{
        margin-left: 0px;
        position: relative;
        display: inline-block;
        border-right: 5px solid #ccc;
        font-size: 12px;
    }
    .underbutton2{
        position: relative;
        display: inline-block;
        border: 5px solid #ccc;
        font-size: 12px;
    }
    .underbutton3{
        position: relative;
        display: inline-block;
        border: 5px solid #ccc;
        font-size: 12px;
    }
    .underbutton4{
        position: relative;
        display: inline-block;
        border: 5px solid #ccc;
        font-size: 12px;
    }
</style>